﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DatabaseBarCodeGenerator.aspx.cs" Inherits="DatabaseBarCodeGenerator" MasterPageFile="~/Site.Master" %>


<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="BodyContent">
    <div class="contentfull">
        <div class="breadcrumbs">
            <ul id="crumbs">
                <li><a title="My Account" href="/account/">My Account</a>
                    <img src="Content/Images/separator.png" alt="&rarr;" class="separator">
                    Barcodes 
                    <img src="Content/Images/separator.png" alt="&rarr;" class="separator">
                    Branded Barcode Creator
                </li>
            </ul>
        </div>
        <div id="showMessages"></div>
        <div class="top">
            <div class="innerleft">
                <h1>
                    <span style="float: left;">Database: Ticketing</span>
                </h1>
            </div>
        </div>

        <div class="content">
            <fieldset>

                <script type="text/javascript" src="/account/javascript/swfobject.js"></script>
                <script type="text/javascript" src="/account/javascript/uploadify/jquery.uploadify.v2.1.4.min.js"></script>
                <form method="post" id="createbarcodeform" style="display: inline;">
                    <input id="createbarcodeform_action" name="action" value="savetemplate" type="hidden">
                    <input name="value" value="F767-348G56" type="hidden">
                    <input id="logoHash" name="logo" value="" type="hidden">
                    <div class="template_options">
                        <div class="template_bg">
                            <h2 class="large">Barcode</h2>
                            <label for="barcodesize" class="templatealign">Size</label>
                            <select name="barcodesize" class="full">
                                <option value="1">50px (Minimal)</option>
                                <option value="2">100px</option>
                                <option value="3">150px</option>
                                <option value="4" selected="">200px</option>
                                <option value="5">250px (Best for Mobile Displays)</option>
                                <option value="6">300px</option>
                                <option value="7">350px</option>
                                <option value="8">400px</option>
                                <option value="9">450px</option>
                                <option value="10">500px (Best for Printing)</option>
                            </select>

                            <br>

                            <label for="errorCorrection" class="label">Error Correction <a href="http://en.wikipedia.org/wiki/Qr_code#Error_correction" target="blank">(?)</a></label>
                            <select name="errorcorrection" id="errorCorrection" class="full">
                                <option value="L" selected="">Level L (7%)</option>
                                <option value="M">Level M (15%)</option>
                                <option value="Q">Level Q (25%)</option>
                                <option value="H">Level H (30%)</option>
                            </select>
                        </div>

                        <div class="template_bg">
                            <h2 class="large">Barcode Value</h2>
                            <strong style="font-size: 0.75em;">Alignment</strong><br>

                            <input id="showID1" name="BarcodeShowID" value="top" type="radio">
                            <label for="showID1" class="template_align">Top</label>
                            <input id="showID2" name="BarcodeShowID" value="bottom" checked="" type="radio">
                            <label for="showID2" class="template_align">Bottom</label>
                            <input id="showID3" name="BarcodeShowID" value="none" type="radio">
                            <label for="showID3" class="template_align">Hide Barcode Value</label>
                            <br>
                            <br>

                            <label for="barcodeIDsize" class="label">Font Size</label>
                            <select name="valuesize" class="full">
                                <option value="1">9pt</option>
                                <option value="2">18pt</option>
                                <option value="3">27pt</option>
                                <option value="4" selected="">36pt</option>
                                <option value="5">45pt</option>
                                <option value="6">54pt</option>
                                <option value="7">63pt</option>
                                <option value="8">72pt</option>
                                <option value="9">81pt</option>
                            </select>
                        </div>
                        <div class="template_bg">
                            <label for="value" class="large h2">Add Custom Text</label>
                            <textarea name="text" class="full"></textarea>
                            <br>

                            <label for="textsize" class="label">Font Size</label>
                            <select name="textsize" id="textsize" class="full">
                                <option value="8">Smallest (8 px)</option>
                                <option value="10">Small (10 px)</option>
                                <option value="12" selected="">Medium (12 px)</option>
                                <option value="14">Large (14 px)</option>
                                <option value="16">Largest (16 px)</option>
                            </select>
                            <br>

                            <label for="align_L" class="label">Alignment</label>
                            <input name="textalignment" id="align_L" value="L" checked="" type="radio">
                            <label for="align_L" class="template_align">
                                <img src="/images/icons/align_left.png" alt="">Left</label>

                            <input name="textalignment" id="align_C" value="C" type="radio">
                            <label for="align_C" class="template_align">
                                <img src="/images/icons/align_center.png" alt="">Center</label>

                            <input name="textalignment" id="align_R" value="R" type="radio">
                            <label for="align_R" class="template_align">
                                <img src="/images/icons/align_right.png" alt="">Right</label>
                        </div>

                        <div class="template_bg">


                            <label for="value" class="h2 large">Upload Your Logo</label>

                            <p><strong>GUIDELINES:</strong> JPG, PNG or GIF. At least 200px on one side recommended. 200KB max.</p>

                            <p>
                                <input id="fileupload" class="full" name="file" type="file">
                            </p>
                            <div id="fileuploadstatus"></div>
                            <script src="/account/javascript/fileupload/jquery.iframe-transport.js"></script>
                            <script src="/account/javascript/fileupload/jquery.fileupload.js"></script>
                            <p></p>



                            <label for="type" class="label">Alignment</label>
                            <select name="logoposition" class="full">
                                <option value="left">Left</option>
                                <option value="right">Right</option>
                                <option value="top">Top</option>
                                <option value="bottom">Bottom</option>
                            </select>


                        </div>
                    </div>

                    <input class="yellow_button yshort" id="save_template" value="Save" type="submit">
                </form>

                <form method="POST" style="display: inline;">
                    <input name="action" value="template" type="hidden">
                    <input id="database_id" name="listid" value="203687" type="hidden">
                    <input value="Email Barcodes" class="yellow_button yshort right" name="qrcode" type="submit">
                </form>

                <script>
                    $(document).ready(function () {
                        var refresh = function (event) {
                            var form = $("#createbarcodeform");
                            $("#barcodeImage").attr('src', '').attr('src', '/account/barcode_generator.php?' + form.serialize()).fadeIn('slow');
                            return true;
                        }
                        $('#fileupload').fileupload({
                            dataType: 'json',
                            url: '/account/barcodes?uploadify=1',
                            done: function (e, data) {
                                $('#fileuploadstatus').empty().html("<img src=\"/images/success.png\"> " + data.result.name + " (" + Math.round(data.result.size / 1024 * 100) / 100 + " KB) has been uploaded.");
                                $('#logoHash').val(data.result.hash);
                                refresh();
                            },
                            fail: function (e, data) {
                                $('#fileuploadstatus').empty().html("<img src=\"/images/warning.png\"> File not supported.");
                            },
                            send: function (e, data) {
                                $('#fileuploadstatus').empty().html("<img src=\"/images/loading-scans.gif\"> File is being uploaded...");
                            },
                            progress: function (e, data) {
                                var progress = parseInt(data.loaded / data.total * 100, 10);
                                $('#fileuploadstatus').empty().html("<img src=\"/images/loading-scans.gif\"> File is being uploaded: " + progress + "% done.");
                            }
                        });
                        $("#createbarcodeform select, #createbarcodeform input, #createbarcodeform textarea").change(refresh).keyup(refresh);
                    });
                </script>

                <div>&nbsp;</div>
                <div id="previewbarcode">
                    <strong style="display: block;">Preview</strong>
                    <img id="barcodeLoader" src="/images/ajax-loader.gif">
                    <img id="barcodeImage" src="/account/barcode_generator.php?value=F767-348G56&amp;valuesize=4&amp;BarcodeShowID=bottom&amp;text=&amp;textsize=12&amp;textalignment=L&amp;barcodesize=4&amp;errorcorrection=L" class="" style="max-width: 55%;">
                </div>
            </fieldset>
            <div style="clear: both;">&nbsp;</div>
        </div>
        <!-- /.contentfull -->
    </div>
    <!-- /.wrapper -->
</asp:Content>
